<script setup lang="ts">
import { QuestionFilled } from "@element-plus/icons-vue";

// 常量
const tag = "分词规则配置";

// ref
// 表示SkewXCard是否展开
const hCardOpen = ref<boolean>(false);

function open() {
  hCardOpen.value = true;
}
function close() {
  hCardOpen.value = false;
}
</script>

<template>
  <MainPage>
    <template v-slot:headerTitle>
      <Lv1stTitle :title="tag" />
      <el-button
        style="margin-left: auto"
        type="primary"
        round
        :icon="QuestionFilled"
        >{{ tag }}</el-button
      >
    </template>
    <template v-slot:decoration>
      <TopBar :Tag="'分词规则配置Console'" />
    </template>
    <template v-slot:contents>
      <ContentsNoInput>
        <template v-slot:main>
          <div class="testContainer1">
            <div class="testContainer2">
              <div class="testContainer3">
                <SrchAddrTCard @isCardOpen="open" @isCardClose="close" />
              </div>
              <div class="testContainer4">
                <div class="testContainer5">
                  <CtlCard :open-flag="hCardOpen" />
                </div>
              </div>
            </div>
          </div>
        </template>
      </ContentsNoInput>
    </template>
  </MainPage>
</template>

<style scoped>
.testContainer1 {
  display: flex;
  position: relative;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100%;
  overflow-x: auto; /* 允许水平滚动 */
  overflow-y: hidden; /* 防止垂直滚动 */
}

.testContainer1 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.testContainer2 {
  position: relative;
  display: flex;
  width: 95%;

  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.testContainer3 {
  display: flex;
  justify-content: center;
  width: 100%;

  transition: 0.4s;
}

.testContainer4 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 7px;
  margin-top: 7px;
  flex-grow: 1;
}

.testContainer5 {
  display: flex;
  width: 100%;
  height: 95%;
}
</style>
